<template>
    <div class="listMaskBox" v-if="user.listModeOnOff" @mousewheel="maskWhell" @click.self="closeListMask">
        <div class="listMask" @click.self="closeListMask">
            
            <loading v-if="user.listModeInfoLoding" loadingStyle="height: 700px"></loading>
            
            <section v-else class="wrap modeInfoBox" @click.self="closeListMask">
                
                <div class="clearfix psoiBox" @click.self="closeListMask" >
                    
                    <div class="modeInfoLeft">
                    <div class="vipFree" v-show="infoMsg.is_vip"></div>
                        <ul class="modeBanner swiper-no-swiping" id="listModenInfo">
                        <li v-for="(item,index) in user.listModeInfoMsg.images"  :key="index" class="uploadImgBox">
                            <img :ref="item" @load="getWh(item)" style="opacity:0" :src="$store.state.AuthUser.smallImgAfter+item" :alt="user.listModeInfoMsg.title">
                        <!-- <li v-for="(item,index) in 5" :key="index" class="uploadImgBox">
                            <img :ref="item" @load="getWh(item)" style="opacity:0" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546407116676&di=62868e3d77345f53b6ce93d00a6fdbfc&imgtype=0&src=http%3A%2F%2Fs9.knowsky.com%2Fbizhi%2Fl%2F20100615%2F20109119%2520%25286%2529.jpg" :alt="user.listModeInfoMsg.title"> -->
                        </li>
                        </ul>
                        <div class="swiper-pagination modeIcon"></div>
                    </div>
                    
                    <div class="modeInfoRight">
                        <button class="closeMaskBtn" @click.self="closeListMask"></button>
                        <!-- <button class="leftMaskBtn"></button>
                        <button class="rightMaskBtn"></button> -->
                        <div class="modeMsg">
                        <div class="modeUserTitle">
                                <p>
                                <span class="newUserName" :title="user.listModeInfoMsg.userinfo.name">{{user.listModeInfoMsg.userinfo.name}}</span>
                                <router-link :to="{path:'/author',query:{id:user.listModeInfoMsg.userinfo.user_id}}" target="_blank">
                                    <span class="newUserHome">进入主页</span>
                                </router-link>
                                </p>
                                <p>
                                <img :src="user.listModeInfoMsg.userinfo.avatar" alt=""> 
                                </p>
                            </div>
                            
                            <div class="modeUserInfo">
                                <h4 :title="user.listModeInfoMsg.title">{{cutString(user.listModeInfoMsg.title,60)}}</h4>
                                <p>
                                <span class="infoItemId">ID:&nbsp;<span>{{user.listModeInfoMsg.id}}</span></span>
                                </p>
                                <div style="padding-right:20px" class="minIconBox">
                                    <span><i class="browseIcon"></i>
                                            {{user.listModeInfoMsg.viewnum}} 
                                        </span> 
                                    <span><i class="downloadNum"></i>
                                            {{user.listModeInfoMsg.downnum}}
                                    </span> 
                                    <span><i class="collNum"></i>
                                        {{user.listModeInfoMsg.collecnum}}
                                    </span>
                                </div>
                                <div>
                                    <img v-if="user.listModeInfoMsg.is_vip" src="./img/infoVip.png" alt="" style="margin-right:6px;">
                                    <img v-if="user.listModeInfoMsg.update" src="./img/infoUpdata.png" alt="">
                                </div>
                            </div>
                            
                            <div class="modeInfoList">
                                <p>
                                    <span class=""><i class="uploadIcon"></i>{{user.listModeInfoMsg.created_at}}</span>
                                </p>
                                <p v-if="user.listModeInfoMsg.style">
                                    <span> <i class="styleIcon"></i> {{user.listModeInfoMsg.style?user.listModeInfoMsg.style.catname:''}}</span>
                                </p>
                                <p>
                                    <span> <i class="versionIcon"></i> {{"3DsMax&nbsp&nbsp"+user.listModeInfoMsg.appversion+"&nbsp&nbsp"+user.listModeInfoMsg.renderertype}}</span>
                                </p>
                                <p>
                                    <span> <i class="ramSizeIcon"></i> {{user.listModeInfoMsg.filesize}}</span>
                                </p>
                                <p v-if="user.listModeType==1">
                                    <span> <i class="lightIcon"></i> {{user.listModeInfoMsg.is_light}}</span>
                                </p>
                                
                                <p class="describe clearfix" v-if="user.listModeInfoMsg.describe">
                                <i class="depictIcon"></i>
                                <span> {{user.listModeInfoMsg.describe}}</span>
                            </p>
                            </div>
                            <div class="rightBtn clearfix">
                            <button class="keepBtn" @click.prevent.stop="collection({e:$event,id:user.listModeInfoMsg.id,type:user.listModeInfoMsg.type})">
                                <i class="collBotton" :class="{'activeCollBotton':isInArray(user.listModeInfoMsg.id)}"></i>
                                {{isInArray(user.listModeInfoMsg.id)?"已收藏":"收藏"}}
                            </button>
                            <button class="transaction" @click="confirmDownload(user.listModeInfoMsg.id,user.listModeInfoMsg.title,user.listModeInfoMsg.coins)">
                                <i class="downloadIcon"></i>{{user.listModeInfoMsg.coins}} 交易币
                            </button>

                        </div>
                        </div>
                    </div>
                </div>
            
            </section>
        </div>
        
       
    </div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
import loading from '../loading'

import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
export default {
  name: "modeInfo",
  data() {
    return {
      loadingShow:true,
      typeMsg:["","3D模型","SU模型","施工图","概念方案","预算方案","材质贴图","高清案例"],
      msg: "我是模型详情",
      maskShow : false,
      modeType : "1",
      i:0,
      maskScrollTop: $('.listMaskBox').scrollTop(),
      rightTop:{
        right:0,
        top:0
      },//右边栏距离顶部和右边的距离
      keyWordsMsg : '3D模型,3D模型,3D模型',//关键词
      titleMsg : '3D模型下载_集设网',//描述
      descriptionMsg : "3D模型下载_集设网",
      swiperOption: {
        prevButton: ".swiper-button-prev", //上一张
        nextButton: ".swiper-button-next", //下一张
        pagination: '.swiper-pagination',//点击页码切换
        paginationClickable :true,//点击页码切换
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },
      rimMsg:null,//相关推荐数据
      domains: [
        {
          value: ""
        }
      ],
      rightTop:{
        right:0,
        top:0
      },//右边栏距离顶部和右边的距离
      diyStyle:{//弹窗的位置
          top: "100px",
          left: "600px"
      },
      infoMsg : {//详情信息
                
        },
    };
  },
  methods: {
      confirmDownload(id,title) {
          if(this.$store.state.AuthUser.userInfo){
                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>确认下载?</p>',
                    loading: false,
                    draggable : true,
                    scrollable:true,
                    onOk: () => {
                        this.actionDownload(id,title)
                    }
                });
            }else{
                this.loginShow();
            }
            
            
        },
      closeListMask(){//关闭详情蒙层
            
        $(document).scrollTop(this.user.listModeScrollTop);
        history.pushState('','',this.user.listModeUrl)
        this.listModeHide();
      },
    getWh(ele){
      if(this.$refs[ele][0].clientWidth<this.$refs[ele][0].clientHeight){
        this.$refs[ele][0].setAttribute("class","modeBannerH");
        this.$refs[ele][0].style.opacity = 1;
      }else{
        this.$refs[ele][0].setAttribute("class","modeBannerW");
        this.$refs[ele][0].style.opacity = 1;
      }
      var galley = document.getElementById("listModenInfo");
          var viewer = new Viewer(galley, { // 相关配置项,详情参考官网
            navbar: false,
            loop:false
          });
    },
    cutString(str, len) {
        //length属性读出来的汉字长度为1
        if(str.length*2 <= len) {
            return str;
        }
        var strlen = 0;
        var s = "";
        for(var i = 0;i < str.length; i++) {
            s = s + str.charAt(i);
            if (str.charCodeAt(i) > 128) {
                strlen = strlen + 2;
                if(strlen >= len){
                    return s.substring(0,s.length-1) + "...";
                }
            } else {
                strlen = strlen + 1;
                if(strlen >= len){
                    return s.substring(0,s.length-2) + "...";
                }
            }
        }
        return s;
    },
    getContent(value, content) {
      $("#province option").each(function(i, e) {
        if ($(e).val() == value) {
          number = i;
        }
      });
    },
    ...mapMutations(//mutations中的方法
            ["loginShow","loginClose","loginLoginName","registerLoginName","collection","listModeHide"]
        ),
    //遮罩的显示与隐藏
    mask(){
        this.maskShow = true;
    },
    maskHide () {
        this.maskShow = false;
    },
    diyMaskPosition(){
        this.diyStyle.left = (document.body.offsetWidth - 547)/2 +"px";
        this.diyStyle.top = (document.documentElement.clientHeight - 629)/2 +"px";
    },
    errorWarning(msg,n) {
      var This = this;
      this.$message({
            message: msg,
            type: 'error',
            customClass : 'downLoadError',
            duration : 2000,
            showClose : true,
            onClose:function () {
                if(n){
                    let routeData = This.$router.resolve({ path: '/recharge'});
                    window.open(routeData.href, '_blank');
                }
            }
        });
    }, 
    actionDownload(id,name,money){//点击下载
            axios({
                method: 'get',
                url: '/downdata/'+id,
                // responseType: 'blob'
            }).then(response => {
                // return;
                if(response.data.status=="1"){
                    // window.open(this.user.userInfo.data.app_url+"api/downurl/"+this.user.userInfo.data.user_id+"/"+this.modeType+"/"+id+"/"+response.data.passkey,"_blank"); 
                    window.location.href = this.user.userInfo.data.app_url+"api/downurl/"+this.user.userInfo.data.user_id+"/"+this.modeType+"/"+id+"/"+response.data.passkey;
                }else if(response.data.status=="0"){
                    this.errorWarning('交易币不足，请充值后再进行下载...',true);
                    
                }
              }).catch((error) => {
                  this.errorWarning("下载失败",false);
              }) 
    },
     download (data,name) {//下载要执行的函数
            if (!data) {
                return
            }
            let url = window.URL.createObjectURL(data)
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', name+'.rar')
            document.body.appendChild(link)
            link.click()
        },
        isInArray(value){
           var arr = null;
           if(!this.user.userInfo){
               return
           }else{
               if(this.modeType!="7"){
                arr = this.user.userInfo.data.datacollects;
                }else{
                    arr = this.user.userInfo.data.articlecollects;
                }
                for(var i = 0; i < arr.length; i++){
                    if(value === arr[i]){
                        return true;
                    }
                }
                return false;
           }
           
        },
        maskWhell(){

        },
       handleScroll(){
            // 页面滚动距顶部距离
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || 
                      document.body.scrollTop
            var scroll = scrollTop - this.i;
            this.i = scrollTop;
            if(this.user.listModeOnOff){
                if($('.modeInfoLeft')&&$('.modeInfoLeft').offset().top<0){
                    $('.modeInfoRight').css({
                        "position":"fixed",
                        "top":"0",
                        "left" : $('.modeInfoLeft').width()+$('.modeInfoLeft').offset().left+'px'
                    })
                }else{
                    $('.modeInfoRight').css({
                        "position":"absolute",
                        "top":"0",
                        "right":"7px",
                        "left" : "auto"
                    })
                }
            }
             
                
            
       }
       
     
  },
  mounted(){
     document.body.scrollTop = 0;
     document.documentElement.scrollTop = 0;
     this.diyMaskPosition();
      window.addEventListener('scroll', this.handleScroll,true);
     
  },
  components:{
    loading,
  },
  created(){
      this.loadingShow = false;
    },
    computed: {
        ...mapState({//登录的用户信息
            user: state => state.AuthUser
        }),
        mismatchError() {
            return this.bag.has('password:auth') && !this.errors.has('password')
        },
    },
    

};
</script>
<style>
  @import './info.css';
  .closeMaskBtn{
      width: 22px;
      height: 22px;
      background: url(./img/closeMask.png) no-repeat center;
      position: absolute;
    top: 0px;
    right: -50px;
    border:none;
    padding:0;
    outline: none;
  }
  .listMaskBox{
      width: 100%;
      position:absolute;
      top:0;
      left:0;
      bottom: 0;
      right: 0;
      overflow:auto;
      z-index:999;
      background: rgba(0,0,0,.65);
  }
  /* .listMask{
      
      background: rgba(0,0,0,.45);
  } */
  .listMaskBox .modeInfoRight{
      position: absolute;
      right: 7px;
      top: 0px;
      width: 313px;
      height: 605px;
  }
  .listMaskBox .modeMsg{
      /* position:fixed; */
      /* right:0; */
      /* top: 71px; */
  }
  /* .top0{
      position: fixed!important;
      top:0;
  } */
  .listMaskBox .psoiBox{
      position: relative;
  }
  .leftMaskBtn{
    width:17px;
    height: 28px;
    background: url(./img/maskLeft.png) no-repeat center;
    position: absolute;
    top: 507px;
    left: -1040px;
     border:none;
    padding:0;
    outline: none;
  }
  .rightMaskBtn{
      width:17px;
      height: 28px;
      background: url(./img/maskRight.png) no-repeat center;
      position: absolute;
    top: 507px;
    right: -130px;
     border:none;
    padding:0;
    outline: none;
  }
  .listMaskBox .newUserName{
    width: 160px!important;
    height: 38px!important;
    white-space: nowrap!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important;
  }
</style>
